<template>
  <div class="app-container infoOut">
    <div class="infoBox">
      <div class="header"><span>硬盘</span></div>
      <div v-loading="loading" class="el-table el-table--enable-row-hover el-table--medium">
        <table cellspacing="0" style="width: 100%;">
          <thead>
            <tr>
              <th class="is-leaf">
                <div class="cell">属性</div>
              </th>
              <th class="is-leaf">
                <div class="cell">值</div>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                <div class="cell">总硬盘</div>
              </td>
              <td>
                <div v-if="server.disk_usage" class="cell">{{ server.disk_usage.disk_total }}</div>
              </td>
            </tr>
            <tr>
              <td>
                <div class="cell">已用硬盘</div>
              </td>
              <td>
                <div v-if="server.disk_usage" class="cell">{{ server.disk_usage.disk_used }}</div>
              </td>
            </tr>
            <tr>
              <td>
                <div class="cell">剩余硬盘</div>
              </td>
              <td>
                <div v-if="server.disk_usage" class="cell">{{ server.disk_usage.disk_free }}</div>
              </td>
            </tr>
            <tr>
              <td>
                <div class="cell">使用率</div>
              </td>
              <td>
                <div v-if="server.disk_usage" class="cell">{{ server.disk_usage.disk_percent }}</div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    
    <div class="infoBox">
      <div class="header"><span>CPU</span></div>
      <div v-loading="loading" class="el-table el-table--enable-row-hover el-table--medium">
        <table cellspacing="0" style="width: 100%;">
          <thead>
            <tr>
              <th class="is-leaf">
                <div class="cell">属性</div>
              </th>
              <th class="is-leaf">
                <div class="cell">值</div>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                <div class="cell">核心数</div>
              </td>
              <td>
                <div v-if="server.cpu" class="cell">{{ server.cpu.cpuNum }}</div>
              </td>
            </tr>
            <tr>
              <td>
                <div class="cell">用户使用率</div>
              </td>
              <td>
                <div v-if="server.cpu" class="cell">{{ server.cpu.used }}%</div>
              </td>
            </tr>
            <tr>
              <td>
                <div class="cell">进程数</div>
              </td>
              <td>
                <div v-if="server.cpu" class="cell">{{ server.cpu.pids }}</div>
              </td>
            </tr>
            <tr>
              <td>
                <div class="cell">系统使用时间</div>
              </td>
              <td>
                <div v-if="server.cpu" class="cell">{{ server.cpu.boot_time }}H</div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <div class="infoBox">
      <div class="header"><span>内存</span></div>
      <div v-loading="loading" class="el-table el-table--enable-row-hover el-table--medium">
        <table cellspacing="0" style="width: 100%;">
          <thead>
            <tr>
              <th class="is-leaf">
                <div class="cell">属性</div>
              </th>
              <th class="is-leaf">
                <div class="cell">内存</div>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                <div class="cell">总内存</div>
              </td>
              <td>
                <div v-if="server.mem" class="cell">{{ server.mem.total }}G</div>
              </td>
            </tr>
            <tr>
              <td>
                <div class="cell">已用内存</div>
              </td>
              <td>
                <div v-if="server.mem" class="cell">{{ server.mem.used }}G</div>
              </td>
            </tr>
            <tr>
              <td>
                <div class="cell">剩余内存</div>
              </td>
              <td>
                <div v-if="server.mem" class="cell">{{ server.mem.free }}G</div>
              </td>
            </tr>
            <tr>
              <td>
                <div class="cell">使用率</div>
              </td>
              <td>
                <div v-if="server.mem" class="cell" :class="{'text-danger': server.mem.percent > 80}">{{
                  server.mem.percent }}%
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

  </div>
</template>

<script>
import io from 'socket.io-client'

export default {
  name: 'Server',
  data() {
    return {
      // 加载层信息
      loading: true,
      // 服务器信息
      server: { cpu: {}}
    }
  },
  created() {
    const _this = this
    _this.loading = true
    const address = this.$API_BASE_URL + '/server'
    this.socket = io(address, {
      transports: ['websocket']
    })
    this.socket.on('monitor_server', function(data) {
      if (_this.loading) {
        _this.loading = false
        _this.server.cpu = data.cpu_info
        _this.server.mem = data.memory_info
        _this.server.disk_usage = data.disk_usage
      } else {
        _this.server.cpu = data.cpu_info
        _this.server.mem = data.memory_info
        _this.server.disk_usage = data.disk_usage
      }
    })
  },
  beforeDestroy() {
    this.socket.close()
  },
  methods: {}
}
</script>

<style>
.infoOut{
  display: flex;
  gap: 18px;
}
.infoBox{
  flex: 1;
  border:1px solid #dfe6ec;
}
.infoBox .header{  
  display: flex;
  height: 54px;
  background: #ffff;
  border-bottom: 1px dashed #ddd;
  align-items: center;
  padding-left: 18px;
}
.infoBox .header span{  
  border-left: 5px solid #144fb4;
  padding-left: 7px;
}
.infoBox .el-table .cell{
  line-height: 40px;
  padding-left: 28px;
}
</style>
